<template>
  <static-content-wrapper
    :designer="designer"
    :field="field"
    :design-state="designState"
    :parent-id="parentId"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
  >
    <div
      ref="fieldEditor"
      :style="{
        fontSize: !!field.options.fontSize ? field.options.fontSize : '1em',
        backgroundColor: field.options.backgroundColor,
        color: field.options.textColor,
        paddingLeft:
          field.options.backgroundColor.indexOf('#ffffff') === -1 ? '8px' : 0,
      }"
    >
      <div
        :style="{
          'white-space': !!field.options.preWrap ? 'pre-wrap' : 'pre',
          'text-align': !!field.options.textAlign
            ? field.options.textAlign
            : 'left',
          lineHeight: 3,
        }"
      >
        {{ formData[fieldId] || field.options.textContent }}
      </div>
    </div>
  </static-content-wrapper>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import StaticContentWrapper from "./static-content-wrapper";
import emitter from "Yan/utils/emitter";
import i18n from "Yan/utils/i18n";
import fieldMixin from "./fieldMixin";

export default {
  name: "static-text_unit",
  componentName: "FieldWidget",
  components: {
    StaticContentWrapper,
  },
  mixins: [emitter, fieldMixin, i18n],
  props: {
    designer: Object,
    fieldId: String,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    formData: Object,
    designState: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    // this.registerToRefList();
    this.initEventHandler();

    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  // beforeDestroy() {
  //   this.unregisterFromRefList();
  // },

  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
</style>
